<script lang="ts">
	import { chats, config, modelfiles, settings, user } from '$lib/stores';
	import AudioSelf from './Messages/AudioSelf.svelte';
	import ProfileImage from './Messages/ProfileImage.svelte';
	import Name from './Messages/Name.svelte';
	import logo from '../icons/logo.png';

	export let file = {};
</script>

<div class=" pb-10">
	<div class=" w-full">
		<div
			class="flex flex-col justify-between px-5 mb-4 max-w-3xl mx-auto rounded-lg group"
		>
			<div class=" flex w-full">
				<div>
					<ProfileImage
						src={$user?.profile_image_url ?? '/user.png'}
					/>
				</div>

				<div class="w-full overflow-hidden">
					<div class="user-message">
						<Name>
							{$user.name}
						</Name>
					</div>
			
					<div
						class="prose w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line"
					>
						<div class="w-full py-2.5 text-[#F7F7F7]">
							<AudioSelf audioSrc={file.url} />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class=" w-full">
		<div
			class="flex flex-col justify-between px-5 mb-4 max-w-3xl mx-auto rounded-lg group"
		>
			<div class=" flex w-full">
				<ProfileImage
					src={logo}
				/>
		
				<div class="w-full overflow-hidden">
					<div class="mb-3">
						<Name>
							云瀚
						</Name>
					</div>
		
					<div class="p-[20px] rounded-[16px] text-[#F7F7F7] bg-[#363A48] prose w-full max-w-full prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line">
						{file?.collection_name}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class=" mb-10" />
</div>
